<template>
  <div  class="dialog-tree">
    <!-- 搜索 -->
    <el-input v-hasPermi="['inv:sort:query']" v-model="searchName" placeholder="请输入分类名称" clearable size="small" prefix-icon="el-icon-search"
      style="margin-bottom:10px" />

    <!-- 分类数据 -->
    <div class="height-tree2">
      <el-tree :data="sortTree" node-key="sortId" :props="defaultProps" :filter-node-method="filterNode" ref="tree"
        v-loading="loading" :highlight-current="isHeight" @node-click="nodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
          <div class="chang-mourse">
            <span>{{ data.sortCode }}-{{ node.label }}</span>
          </div>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //搜索分类名称
        searchName: "",
        //绑定树形数据名称
        defaultProps: {
          children: 'children',
          label: 'sortName',
        },
      }
    },
    props: {
      //遮罩层
      loading: {
        type: Boolean,
        default: true
      },
      // 是否显示操作按钮
      isOperation: {
        type: Boolean,
        default: true
      },

      // 是否高亮
      isHeight: {
        type: Boolean,
        default: false
      },

      // 分类数据
      sortTree: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
      // 树形筛选
      filterNode(value, data) {
        if (!value) return true;
        return data.sortName.indexOf(value) !== -1;
      },
      // 阻止点击默认
      nodeClick(node, data) {
        this.$emit("nodeClick",node,data)
      }
    },
    watch: {
      searchName(val) {
        this.$refs.tree.filter(val);
      }
    }

  }
</script>

<style lang="scss">
  .custom-tree-node {
    font-size: 14px;
    a {
      margin-left: 10px;

      &:hover i {
        font-weight: 700;

      }
    }
    .el-link.is-underline:hover:after {
      border: none !important;

    }
  }

  .chang-mourse {
    display: flex;
    justify-content: space-between;
    .mou-r {
      margin-right: 10px;
    }
  }

  .height-tree2{
    max-height: calc(100vh - 340px);
    overflow: auto;
  }
</style>
